---
title: Tailwind CSS Breadcrumbs for React - Material Tailwind
description: Customise your web projects with our easy-to-use breadcrumbs component for Tailwind CSS and React using Material Design guidelines.
navigation:
  [
    "breadcrumbs",
    "breadcrumbs-with-icon",
    "block-level-breadcrumbs",
    "breadcrumbs-custom-separator",
    "breadcrumbs-custom-styles",
    "breadcrumbs-props",
    "breadcrumbs-theme",
    "breadcrumbs-theme-object-type",
    "breadcrumbs-theme-customization",
    "more-examples"
  ]
github: breadcrumbs
prev: badge
next: button
---

<DocsTitle href="breadcrumbs">
# Tailwind CSS Breadcrumbs - React
</DocsTitle>

Use our Tailwind CSS <Code>Breadcrumbs</Code> component to simply create beautiful <Code>Breadcrumbs</Code> for your pages with Material Tailwind.

<Code>Breadcrumbs</Code> are website links that allow users to track where they are
on a website and how far they are from the homepage. They are highly important elements
for your search engine optimisation (SEO) and user experience.

See below our versatile <Code>Breadcrumbs</Code> component example that you can use in your Tailwind CSS and React project.

<br />

<CodePreview link="breadcrumbs#breadcrumbs" component={<BreadcrumbsExamples.BreadcrumbsDefault />}>
```jsx
import { Breadcrumbs } from "@material-tailwind/react";

export function BreadcrumbsDefault() {
  return (
    <Breadcrumbs>
      <a href="#" className="opacity-60">
        Docs
      </a>
      <a href="#" className="opacity-60">
        Components
      </a>
      <a href="#">Breadcrumbs</a>
    </Breadcrumbs>
  );
}
```
</CodePreview>

---

<DocsTitle href="breadcrumbs-with-icon">
## Breadcrumbs With Icon
</DocsTitle>

You can add any type of icon for the <Code>Breadcrumbs</Code> component as easy as using icon in html.

<CodePreview link="breadcrumbs#breadcrumbs-with-icon" component={<BreadcrumbsExamples.BreadcrumbsWithIcon />}>
```jsx
import { Breadcrumbs } from "@material-tailwind/react";

export function BreadcrumbsWithIcon() {
  return (
    <Breadcrumbs>
      <a href="#" className="opacity-60">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-4 w-4"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
        </svg>
      </a>
      <a href="#" className="opacity-60">
        <span>Components</span>
      </a>
      <a href="#">Breadcrumbs</a>
    </Breadcrumbs>
  );
}
```
</CodePreview>

---

<DocsTitle href="block-level-breadcrumbs">
## Block Level Breadcrumbs
</DocsTitle>

A <Code>Breadcrumbs</Code> could be a block level component as well that get's all the available space in a row. You can render a <Code>Breadcrumbs</Code> as a block level element using the <Code>fullWidth</Code> prop.

<CodePreview link="breadcrumbs#block-level-breadcrumbs" component={<BreadcrumbsExamples.BlockLevelBreadcrumbs />}>
```jsx
import { Breadcrumbs } from "@material-tailwind/react";

export function BlockLevelBreadcrumbs() {
  return (
    <Breadcrumbs fullWidth>
      <a href="#" className="opacity-60">
        Docs
      </a>
      <a href="#" className="opacity-60">
        Components
      </a>
      <a href="#">Breadcrumbs</a>
    </Breadcrumbs>
  );
}
```
</CodePreview>

---

<DocsTitle href="breadcrumbs-custom-separator">
## Breadcrumbs Custom Separator
</DocsTitle>

You can modify the <Code>Breadcrumbs</Code> separators by using the <Code>Separator</Code> prop.

<CodePreview link="breadcrumbs#breadcrumbs-custom-separator" component={<BreadcrumbsExamples.BreadcrumbsCustomSeparator />}>
```jsx
import { Breadcrumbs } from "@material-tailwind/react";

export function BreadcrumbsCustomSeparator() {
  return (
    <Breadcrumbs separator="-">
      <a href="#" className="opacity-60">
        Docs
      </a>
      <a href="#" className="opacity-60">
        Components
      </a>
      <a href="#">Breadcrumbs</a>
    </Breadcrumbs>
  );
}
```
</CodePreview>

---

<DocsTitle href="breadcrumbs-custom-styles">
## Breadcrumbs Custom Styles
</DocsTitle>

You can use the <Code>className</Code> prop to add custom styles to the <Code>Breadcrumbs</Code> component.

<CodePreview component={<BreadcrumbsExamples.BreadcrumbsCustomStyles />}>
```jsx
import { Breadcrumbs } from "@material-tailwind/react";
import { ArrowLongRightIcon } from "@heroicons/react/24/outline";

export function BreadcrumbsCustomStyles() {
  return (
    <Breadcrumbs
      separator={
        <ArrowLongRightIcon className="h-4 w-4 text-white" strokeWidth={2.5} />
      }
      className="rounded-full border border-white bg-gradient-to-tr from-gray-900 to-gray-800 p-1"
    >
      <a
        href="#"
        className="rounded-full bg-white px-3 py-1 font-medium text-gray-900"
      >
        Docs
      </a>
      <a
        href="#"
        className="rounded-full bg-white px-3 py-1 font-medium text-gray-900"
      >
        Components
      </a>
      <a
        href="#"
        className="rounded-full bg-white px-3 py-1 font-medium text-gray-900"
      >
        Breadcrumbs
      </a>
    </Breadcrumbs>
  );
}

```
</CodePreview>

---

<DocsTitle href="breadcrumbs-props">
## Breadcrumbs Props
</DocsTitle>

The following props are available for breadcrumbs component. These are the custom
props that we've added for the breadcrumbs component and you can use all
the other native props as well.

| Attribute   | Type                 | Description                                        | Default                                |
| ----------- | -------------------- | -------------------------------------------------- | -------------------------------------- |
| `separator` | <Code>node</Code>    | Change breadcrumbs separator between it's elements | <Code>/</Code>                         |
| `fullWidth` | <Code>boolean</Code> | Change breadcrumbs to a block level element        | <Code>false</Code>                     |
| `className` | <Code>string</Code>  | Add custom className for breadcrumbs               | `''`                                   |
| `children`  | <Code>node</Code>    | Add content for breadcrumbs                        | No default value it's a required prop. |

<br />
<br />

### For TypeScript Only

```tsx
import type { BreadcrumbsProps } from "@material-tailwind/react";
```

---

<DocsTitle href="breadcrumbs-theme">
## Breadcrumbs Theme
</DocsTitle>

Learn how to customize the theme and styles for breadcrumbs component, the theme object for breadcrumbs component has two main objects:

**A.** The <Code>defaultProps</Code> object for setting up the default value for props of breadcrumbs component.<br />
**B.** The <Code>styles</Code> object for customizing the theme and styles of breadcrumbs component.<br />

You can customize the theme and styles of breadcrumbs component by adding Tailwind CSS classes as key paired values for objects.

<br />
<br />

<DocsTitle href="breadcrumbs-theme-object-type">
## Breadcrumbs Theme Object Type
</DocsTitle>

```ts
interface BreadcrumbsStyleTypes {
  defaultProps: {
    separator: node;
    fullWidth: boolean;
    className: string;
  };
  styles: {
    base: {
      root: {
        initial: object;
        fullWidth: object;
      };
      list: object;
      item: {
        initial: object;
        disabled: object;
      };
      separator: object;
    };
  };
}
```

<br />
<br />

### For TypeScript Only

```tsx
import type { BreadcrumbsStyleTypes } from "@material-tailwind/react";
```

---

<DocsTitle href="breadcrumbs-theme-customization">
## Breadcrumbs Theme Customization
</DocsTitle>

```ts
const theme = {
  breadcrumbs: {
    defaultProps: {
      className: "",
      fullWidth: false,
      separator: "/",
    },
    styles: {
      base: {
        root: {
          initial: {
            width: "w-max",
          },
          fullWidth: { display: "block", width: "w-full" },
        },
        list: {
          display: "flex",
          flexWrap: "flex-wrap",
          alignItems: "items-center",
          width: "w-full",
          bg: "bg-blue-gray-50",
          bgOpacity: "bg-opacity-60",
          py: "py-2",
          px: "px-4",
          borderRadius: "rounded-md",
        },
        item: {
          initial: {
            display: "flex",
            alignItems: "items-center",
            color: "text-blue-gray-900",
            fontSmoothing: "antialiased",
            fontFamily: "font-sans",
            fontSize: "text-sm",
            fontWeight: "font-normal",
            lineHeight: "leading-normal",
            cursor: "cursor-pointer",
            transition: "transition-colors duration-300",
            hover: "hover:text-light-blue-500",
          },
          disabled: {
            pointerEvents: "pointer-events-none",
          },
        },
        separator: {
          color: "text-blue-gray-500",
          fontSize: "text-sm",
          fontSmoothing: "antialiased",
          fontFamily: "font-sans",
          fontWeight: "font-normal",
          lineHeight: "leading-normal",
          px: "mx-2",
          pointerEvents: "pointer-events-none",
          userSelcet: "select-none",
        },
      },
    },
  },
};
```

---
<DocsTitle href="more-examples">
## Explore More Tailwind CSS Examples
</DocsTitle>

Looking for more breadcrumbs examples? Check out our **<a href="https://www.material-tailwind.com/blocks/ecommerce-sections" target="_blank">Ecommerce Sections</a>** from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>.
